<template>
  <div>
    <div>
      <!-- ---------------------------查询 部分--------------------------------- -->
      行业名称:<el-input
        v-model="comname"
        placeholder="请输入行业姓名"
        style="width: 200px"
      ></el-input>
      行业状态：<el-select v-model="comstatus" placeholder="选择状态">
        <el-option label="无效" value="1"></el-option>
        <el-option label="有效" value="2"></el-option>
      </el-select>

      <a href="" v-html="'\u00a0'" style="text-decoration-line: none"></a>
      <a href="" v-html="'\u00a0'" style="text-decoration-line: none"></a>
      <a href="" v-html="'\u00a0'" style="text-decoration-line: none"></a>
      <a href="" v-html="'\u00a0'" style="text-decoration-line: none"></a>

      <el-button type="primary" @click="IndustrialManagementShow()"
        >查询</el-button
      >
      <el-button type="primary" @click="dialogVisible = true">添加</el-button>
    </div>
    <div>
      <!-- ---------------------------显示 部分--------------------------------- -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="com_ind_name" label="行业名称" width="180">
        </el-table-column>
   
         <el-table-column label="行业状态">
        <template slot-scope="scope">
          <el-label v-if="scope.row.com_ind_status"><el-tag>有效</el-tag></el-label>
          <el-label v-else><el-tag>无效</el-tag></el-label>
        </template>
      </el-table-column>
        <el-table-column prop="com_ind_order" label="行业顺序">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              @click="Eatindustrain(scope.row.com_ind_id)"
              type="text"
              size="small"
              >编辑</el-button
            >
            <el-button
              @click="Deleteindustrain(scope.row.com_ind_id)"
              type="text"
              size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <!-- ---------------------------分页 部分--------------------------------- -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageindex"
        :page-sizes="[3, 4, 5, 6]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalcount"
      >
      </el-pagination>
    </div>
    <!-- ----------------添加 部分--------------- -->
    <div>
      <el-dialog title="添加" width="30%" :visible.sync="dialogVisible">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="行业名称">
            <el-input v-model="form.com_ind_name"></el-input>
          </el-form-item>
          <el-form-item label="行业顺序">
            <el-input v-model="form.com_ind_order"></el-input>
          </el-form-item>
          <el-form-item label="行业状态">
            <el-select
              v-model="form.com_ind_status"
              placeholder="请选择行业状态"
            >
              <el-option label="有效" value="1">有效</el-option>
              <el-option label="无效" value="2">无效</el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="IndustrialManagementAdd"
              >添加</el-button
            >
            <el-button @click="dialogVisible = false">取 消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
    <!-- ----------------修改 部分--------------- -->
    <div>
      <el-dialog title="修改" width="30%" :visible.sync="EaitIndus">
        <el-form ref="form2" :model="form2" label-width="80px">
          <el-form-item label="行业名称">
            <el-input v-model="form2.com_ind_name"></el-input>
          </el-form-item>
          <el-form-item label="行业顺序">
            <el-input v-model="form2.com_ind_order"></el-input>
          </el-form-item>
          <el-form-item label="行业状态">
            <el-select
              v-model="form2.com_ind_status"
              placeholder="请选择行业状态"
            >
              <el-option label="有效" :value="0"></el-option>
              <el-option label="无效" :value="1"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="IndustrialManagementUpdate"
              >修改</el-button
            >
            <el-button @click="EaitIndus = false">取 消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      pageindex: 1,
      pagesize: 3,
      totalcount: 0,
      comstatus: null,
      comname: null,
      //添加弹框
      dialogVisible: false,
      //添加对象
      form: {
        com_ind_name: "",
        com_ind_order: "",
        com_ind_status: "",
      },
      //修改弹框
      EaitIndus: false,
      //修改
      form2: {},
    };
  },
  methods: {
    //删除
    Deleteindustrain(id) {
      if (confirm("确定删除吗？")) {
        this.$axios.delete(`http://localhost:38204/api/IndustrialManagement/Delete_IndustryAdminModel?com_id=${id}`).then((r) => {
          if (r.status == 200) {
            alert("删除成功");

            this.IndustrialManagementShow();
          } else {
            alert("删除失败");
          }
        });
      }
    },
    //修改
    IndustrialManagementUpdate() {
      this.$axios
        .put(
          `http://localhost:38204/api/IndustrialManagement/Update_IndustryAdminModel`,
          this.form2
        )
        .then((r) => {
          if (r.status == 200) {
            alert("修改成功");
            this.IndustrialManagementShow();
            this.EaitIndus = false;
          } else {
            alert("失败");
            this.EaitIndus = false;
          }
        });
    },
    //反填
    Eatindustrain(id) {
      this.EaitIndus = true;
      this.$axios
        .get(
          `http://localhost:38204/api/IndustrialManagement/Edit_IndustryAdminModel?com_id=${id}`
        )
        .then((r) => {
          this.form2 = r.data.data;
        });
    },
    //添加
    IndustrialManagementAdd() {
     
      this.dialogVisible = true;
      this.$axios
        .post(
          `http://localhost:38204/api/IndustrialManagement/Add_IndustryAdminModel`,
          this.form
        )
        .then((r) => {
          if (r.status == 200) {
            alert("添加成功");
            this.IndustrialManagementShow();
            this.dialogVisible = false;
          } else {
            alert("失败");
            this.dialogVisible = false;
          }
        });
    },
    //显示
    IndustrialManagementShow() {
      this.$axios
        .get(
          `http://localhost:38204/api/IndustrialManagement/Show_IndustryAdminModel`,
          {
            params: {
              pageindex: this.pageindex,
              pagesize: this.pagesize,
              comstatus: this.comstatus,
              comname: this.comname,
            },
          }
        )
        .then((r) => {
          this.tableData = r.data.list;
          this.totalcount = r.data.totalcount;
        });
    },
    handleSizeChange(val) {
      this.pagesize = val;
      this.IndustrialManagementShow();
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.pageindex = val;
      this.IndustrialManagementShow();
      console.log(`当前页: ${val}`);
    },
  },
  created() {
    this.IndustrialManagementShow();
  },
};
</script>

<style>
</style>
